<template>

  <div class="app-container">


    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="queryForm.keywords" placeholder="请输入关键字(名称/标识)." style="width: 18.75rem;" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryForm.status" placeholder="请选择">
          <el-option label="--请选择--" value="" />
          <el-option label="停用" value="1" />
          <el-option label="正常" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search"  size="mini" :loading="loading" @click="onQuerySubmit">查询</el-button>
        <el-button type="info" icon="el-icon-refresh"  size="mini" :loading="loading" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" style="margin-bottom: 0.3125rem;">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          :loading="loading"
          t
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table
      :data="tableData"
      border
      empty-text="暂无数据."
      style="width: 100%">
      <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
            :index="indexMethod">
          </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="180">
      </el-table-column>

      <el-table-column
        prop="code"
        label="标识"
        width="180">
      </el-table-column>

      <el-table-column
        prop="orderNum"
        label="显示顺序"
        width="80">
      </el-table-column>

      <el-table-column prop="status" label="状态" width="80" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status='0' " >正常</el-tag>
          <el-tag v-else type="danger">锁定</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | dateFormat}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="left" >
        <template slot-scope="scope">
          <el-button v-if="scope.row.code !='SuperSystem' " type="text" icon="el-icon-edit-outline" size="small" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button v-if="scope.row.code !='SuperSystem' "  type="text" icon="el-icon-delete" size="small" @click="handleDelete(scope.row)">删除
          </el-button>

          <el-button v-if="scope.row.code !='SuperSystem' "  type="text" icon="el-icon-user" size="small" @click="openRoleUser(scope.row)">分配用户
          </el-button>

 <!--         <el-button v-if="scope.row.code !='SuperSystem' "  type="text" icon="el-icon-coin" size="small" @click="openRoleData(scope.row)">数据权限
          </el-button> -->

          <el-button v-if="scope.row.code !='SuperSystem' "  type="text" icon="el-icon-setting" size="small" @click="openRoleOpera(scope.row)">操作权限
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-col :span="24">
        <div align="right" style="margin-top: 0.3125rem;">
          <el-pagination background layout="prev, pager, next" :current-page="page.cur" :page-size="page.limit" :total="page.total" @current-change="handleCurrentChange" />
        </div>
      </el-col>
    </el-row>

    <!--编辑框-->
    <info-dialog
      v-if="editDialog.visible"
      :properties="editDialog"
      @closed="close"
      @refresh="load"
    />

    <RoleUserDialog
      v-if="roleUserDialog.visible"
      :properties="roleUserDialog"
      @closed="closeRoleUser"
    />

    <RoleDataDialog
      v-if="roleDataDialog.visible"
      :properties="roleDataDialog"
      @closed="closeRoleData"
    />

    <RoleOperaDialog
      v-if="roleOperaDialog.visible"
      :properties="roleOperaDialog"
      @closed="closeRoleOpera"
    />

  </div>
</template>

<script>
  import InfoDialog from './components/InfoDialog.vue'
  import RoleUserDialog from './components/RoleUserDialog.vue'
  import RoleDataDialog from './components/RoleDataDialog.vue'
  import RoleOperaDialog from './components/RoleOperaDialog.vue'


  import {
    hasPermission
  } from '@/utils/permission'
  import {
    findRoleList,
    saveRole,
    deleteRole
  } from '@/api/system/role'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name:'Role',
    components: {
      InfoDialog,
      RoleUserDialog,
      RoleDataDialog,
      RoleOperaDialog
    },
    data() {
      return {
        loading:false,
        queryForm: {
          keywords: undefined,
          status: '',
          orgId: ''
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        tableData: [],
        editDialog: {
          visible: false,
          type: '0',
          data: {}
        },
        roleUserDialog:{
          visible: false,
          data: {}
        },
        roleDataDialog:{
          visible: false,
          data: {}
        },
        roleOperaDialog:{
          visible: false,
          data: {}
        },
      }
    },
    created() {
      this.load();
    },
    methods: {
      indexMethod(index) {
        return index +1;
      },
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.keywords=undefined;
        this.queryForm.status='';
        this.load()
      },
      load(){
        this.loading=true
        findRoleList({
          cur: this.page.cur,
          limit: this.page.limit,
          keywords: this.queryForm.keywords,
          orgId: this.queryForm.orgId,
          status: this.queryForm.status
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result.list
            this.page.total = rsp.result.totalRow
            this.tableData = _data
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      close: function(e) {
        this.editDialog.visible = false
        this.editDialog.data = {}
        this.load()
      },
      handleCurrentChange(cur) {
        this.page.cur = cur
        this.load()
      },
      handleAdd: function(e) {
        this.editDialog.visible = true
        this.editDialog.type = '0'
      },
      handleEdit: function(data) {
        this.editDialog.visible = true
        this.editDialog.type = '1'
        this.editDialog.data = data
      },
      handleDelete: function(data) {
        this.$confirm('确认删除【' + data.name + '】吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          deleteRole({
            id: data.id
          }).then(response => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 500
            })
            this.load()
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
        })
      },
      openRoleUser: function(row) {
        this.roleUserDialog.visible = true
        this.roleUserDialog.data =row
      },
      closeRoleUser: function(e) {
        this.roleUserDialog.visible = false
        this.roleUserDialog.data = {}
        this.load()
      },
      openRoleOpera: function(row) {
        this.roleOperaDialog.visible = true
        this.roleOperaDialog.data =row
      },
      closeRoleOpera: function(e) {
        this.roleOperaDialog.visible = false
        this.roleOperaDialog.data = {}
        this.load()
      },
      openRoleData: function(row) {
        this.roleDataDialog.visible = true
        this.roleDataDialog.data =row
      },
      closeRoleData: function(e) {
        this.roleDataDialog.visible = false
        this.roleDataDialog.data = {}
        this.load()
      }
    }
  }
</script>
